<template>
  <div style="height: 100%;" class="a">
    <div ref="chart" style="height: 100%;"></div>
    <div class="text">
      <div  class="ttext" style="color:#AAAAAA">{{data[elementIndex].type}}</div>
    </div>
  </div>
</template>
<script>
import { Chart, registerShape, registerInteraction } from '@antv/g2';
export default {
  name: 'PieChart',
  props: {
    data: Array,
    color: Array,
    type: String,
    value: String,
    text: String,
    unit: {
      type: String,
      default: '%'
    },
    delay: {
      type: Number,
      default: 0
    },
    total: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      view1: null,
      view2: null,
      elementIndex: 0,
      elementdata: []
    };
  },
  mounted() {
    this.initChart();
    setTimeout(() => {
      this.drawChart();
    }, this.delay);
  },
  watch: {
    data: {
      handler() {
        this.updataData();
      },
      deep: true
    }
  },
  // filters: {
  //   numFilter(value) {
  //   // 截取当前数据到小数点后两位
  //     const realVal = Number(value).toFixed(1);
  //     // num.toFixed(1)获取的是字符串
  //     return Number(realVal);
  //   }
  // },
  methods: {
    initChart() {
      const ref = this.$refs.chart;
      this.chart = new Chart({
        container: ref,
        width: ref.clientWidth,
        height: ref.clientHeight
      });
    },
    drawChart() {
      // const ratio = window.ratio;
      const sliceNumber = 0.01;
      registerShape('interval', 'slice-shape', {
        draw(cfg, container) {
          const points = cfg.points;
          let path = [];
          path.push(['M', points[0].x, points[0].y]);
          path.push(['L', points[1].x, points[1].y - sliceNumber]);
          path.push(['L', points[2].x, points[2].y - sliceNumber]);
          path.push(['L', points[3].x, points[3].y]);
          path.push('Z');
          path = this.parsePath(path);
          return container.addShape('path', {
            attrs: {
              fill: cfg.color,
              path
            }
          });
        }
      });
      this.view1 = this.chart.createView();
      this.view1.data(this.data);
      this.view1.coordinate('theta', {
        radius: 0.98,
        innerRadius: 0.92
      });
      this.chart.legend(false);
      this.view1
        .interval()
        .adjust('stack')
        .position(this.value)
        .color(this.type, this.color)
        .shape('slice-shape');
      this.view2 = this.chart.createView();
      this.view2.data(this.data);
      this.view2.coordinate('theta', {
        radius: 0.78,
        innerRadius: 0.85
      });
      this.view2
        .interval()
        .adjust('stack')
        .position(this.value)
        .color('rgba(255, 255, 255, 0.1)')
        .shape('slice-shape');
      registerInteraction('elementHighlight', {
        start: [{ trigger: 'element:mouseover', action: 'element-highlight:highlight' }],
        end: [{ trigger: 'element:mouseleave', action: 'element-highlight:reset' }]
      });
      this.view1.interaction('elementHighlight');
      this.chart.tooltip(true);
      this.chart.render();
      this.chart.on('element:statechange', (ev) => {
        const { state, stateStatus, element } = ev.gEvent.originalEvent;
        // console.log(ev.gEvent.originalEvent);
        if (state === 'active') {
          if (stateStatus) {
            this.elementIndex = element.elementIndex;
            // let PriceTotal = 0;
            // this.data.forEach((item) => {
            //   console.log(item.value);
            //   PriceTotal += item.value;
            // });
            // console.log(this.data, element, PriceTotal[0]);
            // element.data.value = ((element.data.value / PriceTotal) * 100).toFixed(2);
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
  .a{
    position: relative;
  }
  .text{
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%);
    font-size: .875rem;
  //   .textnum{
  //     font-size:1.25rem;
  //     color:#FFFFFF;
  //     margin-left:0.3125rem;
  //     width: 3.125rem;
  //     display: flex;
  //     align-items: center;
  //     justify-content: center;
  //     .per{
  //     font-size:0.75rem !important;
  // }
    // }
  }
</style>
